<template>
  <div class = "home">
    <!--
        由Login组件跳转而来，所以这里应该先对用户的token进行验证，如果用户没有登录，就应该直接跳转到登录页面，
        可以使用导航守卫来完成这个任务， 导航守卫，主要就是用来监听路由的进入和离开的，
        提供了 beforeEach和afterEach两个方法，分别在路由改变前和改变后触发
        两个方法都有三个参数 to：即将要进入的目标路由 from：即将要离开的当前路由 next：调用该方法后才进入下一钩子
        需要在 router->index.js中配置
    -->
    <!-- 退出功能的完成,也就是通过点击事件，清空sessionStorage，然后重定向到登陆页面 -->
    <!--    <el-link type = "warning" @click = "exitClick">退出</el-link>-->

    <!-- 使用了el的布局容器，而且布局容器的标签名就是它的类名，我们可以直接使用这个标签名进行样式设计 -->
    <el-container>
      <!-- header默认高度为60px 可以直接在行内添加height="80px" 决定高度多少 -->
      <el-header>
        <div class = "title">电子商务管理系统</div>
        <el-link type = "warning" @click = "exitClick">退出</el-link>
      </el-header>
      <el-container>

        <el-aside :width = "!togglec?'200px':'64px'">
          <!--
            这里使用了el中的导航菜单，主要的组件有 el-menu表示导航菜单，这是最外层的包裹，
            多级菜单 el-submenu 包裹 ， 菜单分组 el-menu-item-group 包裹
            el-menu-item 就是最基本的选项 具体的组件方法和样式建议去el官网看
         -->
          <div class = "toggle_button" @click = "toggleCollapse">
            <i class = "iconfont icon-xianxingleizhenyu"></i>
          </div>
          <!--
                这里的unique-opened 表示只能同时展开一个标签页，因为需要传入布尔类型所以需要动态绑定
                这里的菜单展开和折叠动画会卡顿所以直接去掉动画效果
                collapse表示能否折叠菜单  collapse-transition 是否开启折叠动画
           -->
          <el-menu background-color = "#333744"
                   text-color = "#fff"
                   :unique-opened = "true"
                   :collapse = "togglec"
                   :collapse-transition = "false"
                   :default-active = "default_active"
                   :router = "true">
            <!-- 写在标签内的属性都不能有大写字母 但是事件可以用大写字母 -->
            <!-- 这里的index是el-submenu需要的而且需要的类型是一个数组，所以我们这里使用动态绑定的话就需要转换成字符串 -->
            <el-submenu v-for = "(item,index) in menulist" :key = "item.id" :index = "item.path">
              <template slot = "title">
                <i :class = "'iconfont '+selficon[index]"></i>
                <span>{{item.authName}}</span>
              </template>
              <!--
                  需要添加:index唯一标识，让其在激活时颜色独立，如果重复了在激活时，相同的标识都会被激活
                  添加了一个点击事件，可以存储当前点击的index值，让导航栏默认激活该index值
               -->
              <el-menu-item v-for = "iitem in item.children"
                            :key = "iitem.id"
                            :index = "'/home/'+iitem.path"
                            @click = "saveAlive(iitem.path)">
                <!-- 要使用这样的方式添加icon图标，使用prefix-icon无效，应该是表单特有的属性， 使用template包裹 -->
                <template slot = "title">
                  <i class = "el-icon-menu"></i>
                  <span>{{iitem.authName}}</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script>

/*
  * 因为我们安装了eslint依赖用于检查代码规范，所以我们可能会遭遇eslint的各种各样的报错，我们就可以使用 .prettierrc 文件
  * 这个文件是Prettier插件的配置文件，这个插件是很多编辑器都集成了的，比如webstorm，vscode（需要自己安装）
  * 这个插件就是代码格式化工具， 我们可以通过配置文件来修改格式化的样式 以达到eslint 的样式，有三种方法
  * 1. .prettierrc 文件 也就是视频中使用的方法就在当前根目录下  2. prettier.config.js 配置文件
  * 3. package.json中配置prettier属性  配置的属性和属性值有很多 建议去搜一下 我们使用的 .prettierrc 文件中的
  * "semi": false,"singleQuote": true，  semi表示分号false表示不使用分号  singleQuote表示使用单引号
  * 但是eslint太烦了，我已经关闭了，关闭方法是在vue.config.js中使用 module.exports = {lintOnSave: false}
  * 如果想保留eslint，但是忽略一些警告就可以使用.eslintrc.js文件来配置eslint
  * */

export default {
  name: 'Home',
  data () {
    return {
      menulist: [],
      selficon: [
        'icon-xianxingbingbao',
        'icon-xianxingshirun ',
        'icon-xianxingtedabaoyu ',
        'icon-xianxingfuchen',
        'icon-xianxingleizhenyu '
      ],
      togglec: false,
      // 设置导航栏默认激活的菜单项，如果sessionStorage中存储的有就使用，如果没有默认为users
      default_active: window.sessionStorage.default_active || 'users'
    }
  },
  methods: {
    exitClick () {
      // 退出功能，清空sessionStorage，并且重定向到login界面
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    getMenuList () {
      this.$http.get('menus').then((ret) => {
        if (ret.data.meta.status === 200) this.menulist = ret.data.data
        else this.$message.error(ret.data.meta.msg)
      })
    },
    toggleCollapse () {
      this.togglec = !this.togglec
    },
    saveAlive (path) {
      // 将index值存储到window.sessionStorage
      window.sessionStorage.setItem('default_active', path)
    }
  },
  created () {
    this.getMenuList()
  }
}
</script>

<style lang = "less" scoped>
  .home {
    height: 100%;
  }

  .iconfont {
    width: 24px;
    font-size: 18px;
    display: inline-block;
  }

  .toggle_button {
    background-color: #454F61;
    text-align: center;
    color: #fff;
    cursor: pointer;
  }

  /*
    因为有两个el-container嵌套所以这里两个el-container 都要设置高度  这里设置了高度上面的导航栏才不会出来滚动条
  */
  .el-container {
    height: 100%;

    .el-container {
      height: 92%;
    }
  }

  .el-header {
    background-color: #373d41;
    text-align: center;
    position: relative;
    display: flex;
    line-height: 60px;
    justify-content: space-between;

    .title {
      font-size: 30px;
      color: #fff;
    }
  }

  .el-aside {
    background-color: #333744;
    height: 100%;

    .el-menu {
      border: none;
    }
  }

  .el-main {
    background-color: #eaedf1;
    height: 100%;
  }

</style>
